import React, {Component} from 'react'
import {getRankingInfo} from 'api/ranking'
import {getSongVKey, getSongLyric} from 'api/song'
import Scroll from 'components/common/scroll/Scroll'
import './rankDetail.styl'
import {findDOMNode} from 'react-dom'
class RankDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            topInfo: {},
            songList: []
        }
    }
    componentDidMount () {
        console.log(this.props.match.params.id)
        getRankingInfo(this.props.match.params.id).then(res => {
            console.log(res)
            if (!res.code) {
                let list = []
                res.songlist.forEach(item => {
                    if (item.payplay === 1) {return}
                    // 图片
                    item.data.img = `http://y.gtimg.cn/music/photo_new/T002R300x300M000${item.data.albummid}.jpg?max_age=2592000`
                    this.getSongUrl(item, item.data.songmid)
                    list.push(item)
                })
                this.setState({
                    topInfo: res.topinfo,
                    songList: list
                })
            }
        })
    }
    // 获取歌曲url
    getSongUrl(song, mId) {
        getSongVKey(mId).then((res) => {
            if (res) {
                if(!res.code) {
                    if(res.data.items) {
                        let item = res.data.items[0];
                        song.data.url =  `http://dl.stream.qqmusic.qq.com/${item.filename}?vkey=${item.vkey}&guid=3655047200&fromtag=66`
                    }
                }
            }
        })
    }
    getLyric(songId) {
        getSongLyric(songId).then(res => {
            console.log(res)
        })
    }
    // 获取点击歌曲的歌词

    // 去播放
    toPlay (song, index) {
        // 把所点击播放的音乐保存在本地，并跳转至音乐播放页面
        // console.log(song)
        this.getLyric(song.data.songid)
        this.props.setSong(song.data, index)
        this.props.setSongs(this.state.songList.map(item => item.data))
        this.props.history.push('/play')
    }
    scroll = ({y}) => {
        let bg = findDOMNode(this.refs.bg)
        let fixed = findDOMNode(this.refs.bgFixed)
        if (y<0) {
            if (Math.abs(y) + 50 >= bg.offsetHeight) {
                fixed.style.display = 'block'
            } else {
                fixed.style.display = 'none'
            }
        } else {
            let transform = `scale(${1 + y * 0.004}, ${1 + y * 0.004})`;
            bg.style["webkitTransform"] = transform;
            bg.style["transform"] = transform;
        }

    }
    render() {
        return (
            <div className='rankDetail'>
                <div className='rank_top' ref='rank_top'>
                    <div className='rank_top_header'>
                        <i className='iconfont icon-jiantou' onClick={() => {window.history.back();}}></i>
                        <span>{this.state.topInfo.ListName}</span>
                    </div>

                    {/*当列表滑到顶部时隐藏*/}
                    <div className='bg' ref='bg' style={{backgroundImage: `url(${this.state.topInfo.pic_album})`}}>
                        <div className='mask'></div>
                    </div>

                    {/*当列表滑到顶部时显示*/}
                    <div className='bg fixed' ref='bgFixed' style={{backgroundImage: `url(${this.state.topInfo.pic_album})`}}>
                        <div className='mask'></div>
                    </div>

                    <div className='play_btn'>
                        <i className='iconfont icon-16'></i>
                        <span>播放全部</span>
                    </div>
                </div>
                    <div className='rank_list'>
                        <Scroll onScroll={this.scroll}>
                            <div className='rank_item_wrapper' ref='rank_item_wrapper'>
                                <p className='rank_title'>排行榜 共{this.state.songList.length}首歌</p>
                                {
                                    this.state.songList.map((val, index) => (
                                        <div key={index} className='list_item' onClick={() => this.toPlay(val, index)}>
                                            <div className='list_index'>
                                                {index + 1}
                                            </div>
                                            <div className='list_info'>
                                                <p>{val.data.songname}</p>
                                                <p>
                                                    {
                                                        val.data.singer.map((subVal, subIndex) => (
                                                            <span key={subIndex}>
                                                        {subVal.name}
                                                                <span style={{ display :subIndex === val.data.singer.length - 1 ? 'none' : ''}}> / </span>
                                                    </span>
                                                        ))
                                                    }
                                                </p>
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </Scroll>
                    </div>
            </div>
        )
    }
}

export default RankDetail